import React, { useEffect, useState } from "react"
import styled from "styled-components"
import { Tag } from "antd"
import { get } from "@/utils/request"
import dayjs from "dayjs"

const StyledContainer = styled.div`
  .logitem-container {
    width: 100%;
  }
`

interface LogItemInfo {
  page_id: string
  level: string
  params: string
  timestamp: number
  extra?: string
}

const StyledLogItem = styled.tr`
  height: 30px;
`

const tagColor: Record<string, string> = {
  error: "red",
  info: "grey",
}

const LogItem: React.FC<{ info: LogItemInfo }> = ({ info }) => {
  return (
    <StyledLogItem>
      <td className="pageid">{info.page_id}</td>
      <td className="level">
        <Tag color={tagColor[info.level] || "purple"}>{info.level}</Tag>
      </td>
      <td className="params">{info.params}</td>
      <td className="timestamp">
        {dayjs.unix(info.timestamp).format("YYYY-MM-DD HH:mm:ss")}
      </td>
    </StyledLogItem>
  )
}

export const RealtimeLog = () => {
  const [list, setList] = useState<any[]>([])

  useEffect(() => {
    get("/pegasus/api/log/get_logs/").then((res) => {
      // @ts-ignore
      setList(res)
    })
  }, [])

  return (
    <StyledContainer className="mb-6 p-5 border bg-white rounded-md mr-2">
      <h3 className="text-lg mb-5">实时日志</h3>
      <table className="logitem-container">
        <tbody>
          {list?.map(it => {
            return (
              <LogItem
                key={it.timestamp}
                info={{
                  ...it,
                }}
              />
            )
          })}
          <LogItem
            info={{
              page_id: "test",
              level: "info",
              params: `{"message": "test"}`,
              timestamp: 1621323902,
            }}
          />
          <LogItem
            info={{
              page_id: "test1123",
              level: "info",
              params: `{"message": "test"}`,
              timestamp: 1621323947,
            }}
          />
          <LogItem
            info={{
              page_id: "error test222",
              level: "error",
              params: `{"message": "test", "stack": "test"}`,
              timestamp: 1621323936,
            }}
          />
          <LogItem
            info={{
              page_id: "error test233",
              level: "error",
              params: `{"message": "test", "stack": "test"}`,
              timestamp: 1621323936,
            }}
          />
          <LogItem
            info={{
              page_id: "error test22",
              level: "error",
              params: `{"message": "test", "stack": "test"}`,
              timestamp: 1621323936,
            }}
          />
          <LogItem
            info={{
              page_id: "error test21",
              level: "error",
              params: `{"message": "test", "stack": "test"}`,
              timestamp: 1621323936,
            }}
          />
          <LogItem
            info={{
              page_id: "error test10",
              level: "error",
              params: `{"message": "test", "stack": "test"}`,
              timestamp: 1621323936,
            }}
          />
          <LogItem
            info={{
              page_id: "error test9",
              level: "error",
              params: `{"message": "test", "stack": "test"}`,
              timestamp: 1621323936,
            }}
          />
          <LogItem
            info={{
              page_id: "error test8",
              level: "error",
              params: `{"message": "test", "stack": "test"}`,
              timestamp: 1621323936,
            }}
          />
          <LogItem
            info={{
              page_id: "error test7",
              level: "error",
              params: "{}",
              timestamp: 1621323936,
            }}
          />
          <LogItem
            info={{
              page_id: "error test6",
              level: "error",
              params: "{}",
              timestamp: 1621323936,
            }}
          />
          <LogItem
            info={{
              page_id: "error test5",
              level: "error",
              params: "{}",
              timestamp: 1621323936,
            }}
          />
          <LogItem
            info={{
              page_id: "error test4",
              level: "error",
              params: "{}",
              timestamp: 1621323936,
            }}
          />
        </tbody>
      </table>
    </StyledContainer>
  )
}
